<template>
  <div class="demo">
    <h1>{{ msg }}</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ myAge }}</h2>
    <h2>性别：{{ sex }}</h2>
    <button @click="addAge">年林+1</button>
  </div>
</template>

<!-- 
    现在需要对传来的数据进行修改,eg:修改年龄为30
    不能直接对传来的数据进行修改,所以data中设置一个属性=age的值,页面展示data的值,
    在methods中设置一个方法,对data中的属性进行修改
-->

<script>
    export default {
        name:'My',
        data(){
            return {
                msg: 'Hello Vue!',
                myAge: this.age //先
            }
        },
        methods:{
            addAge(){
                this.myAge++
            }
        },
        //1.简单接收
        // props:['name','age','sex']

        //2. 第二种方式（限制类型）
        // props:{
        //     name:String,
        //     age:Number,
        //     sex:String
        // }

        //3.完整写法
        props: {
            name: {
                type: String,//限制类型
                required:true//必须提供
            },
            age:{
                type:Number,
            },
            sex:{
                type:String,
            }
        }
    }
</script>

<style>
  .demo {
    background-color: greenyellow;
  }
</style>